<!-- src/components/Layout.vue -->
<template>
    <div style="display: flex; min-height: 100vh; background: var(--bg-color-page, #f5f6f8);">
        <!-- 左侧菜单 -->
        <div :style="{ background: '#fff' }">
            <t-menu v-model:value="currentPath" @change="handleMenuChange" theme="light" :collapsed="collapsed"
                default-value="menu/dashboard">
                <template v-for="item in menuConfig" :key="item.value">
                    <!-- 一级菜单项（无子菜单） -->
                    <t-menu-item v-if="!item.children" :value="item.value">
                        <template #icon>
                            <t-icon :name="item.icon" />
                        </template>
                        {{ item.title }}
                    </t-menu-item>

                    <!-- 带子菜单的项 -->
                    <t-submenu v-else :value="item.value" :title="item.title">
                        <template #icon>
                            <t-icon :name="item.icon" />
                        </template>
                        <t-menu-item v-for="child in item.children" :key="child.value" :value="child.value">
                            {{ child.title }}
                        </t-menu-item>
                    </t-submenu>
                </template>
            </t-menu>

        </div>

        <!-- 右侧内容 -->
        <div style="flex: 1;">
            <div class="content-menu-item">
                <div class="menu-item">
                    <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
                        <template #icon><t-icon :name="iconName" /></template>
                    </t-button>
                </div>
                <div class="menu-item">
                    <t-button class="t-demo-collapse-btn" variant="text" shape="square" @click="changeCollapsed">
                        <template #icon><t-icon :name="iconName" /></template>
                    </t-button>
                </div>
            </div>

            <div class="content" v-if="currentPath != '/menu'">
                <router-view />
            </div>
            <div class="content" v-else>
                ~
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { ButtonProps, MenuValue } from 'tdesign-vue-next';
const collapsed = ref(false);
const iconName = computed(() => (collapsed.value ? 'chevron-right' : 'chevron-left'));
// 菜单配置（不要用 ref 包裹整个数组，v-for 可以直接读取）
const menuConfig = [
    {
        value: '/dashboard',
        title: '仪表盘',
        icon: 'app',
        route: true
    },
    {
        value: '/resource',
        title: '资源列表',
        icon: 'code',
        children: [
            { value: '/content1', title: '资源管理', route: true },
            { value: '/content2', title: '操作日志', route: true }
        ]
    },
    {
        value: '/scheduling',
        title: '调度平台',
        icon: 'file',
        children: [
            { value: '/content3', title: '任务管理', route: true }
        ]
    }
]

const route = useRoute()
const router = useRouter()
const changeCollapsed: ButtonProps['onClick'] = () => {
    collapsed.value = !collapsed.value;
};
// 当前选中菜单项（同步路由）
const currentPath = ref(route.path)

// 监听路由变化，同步菜单高亮
watch(() => route.path, (newPath) => {
    currentPath.value = newPath
})

// 菜单选中时触发
const handleMenuChange = (value: MenuValue) => {
    console.log(value)
    // 检查是否是有效页面路径
    const isValid = menuConfig.some(item =>
        (item.route && item.value === value) ||
        (item.children?.some(c => c.value === value))
    )

    if (isValid) {
        router.push('/menu' + value)
    }
}

</script>

<style lang="scss" scoped>
.content-menu-item {
    display: flex;



}
</style>